<template>
	<view>
		<u-tabs :list="menu" lineColor="#FF7E11" :scrollable="false" activeStyle="color:#FF7E11"
			@change="setAct"></u-tabs>
		<view class="list mt40">
			<view class="item ml20 mr20 pt20 pb20 line" v-for="(item, index) in list" :key="index">
				<view class="title d-b-c">
					<text>法事内容:</text>
					<text :class="
             item.active == 1 ? 'orange' : item.active == 2 ? 'green' :item.active == 4 ? 'red' : 'blue'
           ">
						{{
             item.active == 1
               ? "待同意"
               : item.active == 2
               ? "待服务"
               : item.active == 4
               ? "已拒绝"
               : "已完成"
           }}
					</text>
				</view>
				<view class="content mt20">{{ item.content }}</view>
				<view class="title mt20">法事人数:</view>
				<view class="content mt20">{{ item.num }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
						name: "全部",
						id: 0,
					},
					{
						name: "待同意",
						id: 1,
					},
					{
						name: "待服务",
						id: 2,
					},
					{
						name: "已完成",
						id: 3,
					},
					{
						name: "已拒绝",
						id: 4,
					},
				],
				list: [],
				active: 0,
				// page: 1
			};
		},
		methods: {
			setAct(e) {
				// console.log(i);
				this.active = e.index;
				this.list = [];
				// this.page = 1;
				this.getList();
			},
			async getList() {
				const res = await this.$request({
					url: this.$api.orderList,
					data: {
						// page: this.page,
						active: this.menu[this.active].id,
					},
				});
				if (res.code == 1) {
					this.list = this.list.concat(res.data);
					// this.page++;
				}
			},
		},
		onLoad() {
			this.getList();
		},
	};
</script>

<style></style>